<template>
  <view class="com-flex" :style="flexStyles">
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";

const { flex1, flexDirection, alignItems, justifyContent } =
  withDefaults(
    defineProps<{
      flex1?: boolean;
      flexDirection?: "row" | "column";
      alignItems?: "center" | "flex-start" | "flex-end";
      justifyContent?: "center" | "flex-start" | "flex-end";
    }>(),
    {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
    }
  );

const flexStyles = computed(() => {
  return {
    display: "flex",
    flexDirection,
    alignItems,
    justifyContent,
    flex: flex1 ? 1 : "initial",
  };
});
</script>
